<template>
    <div class="popular-anchor">
        <div class="popular-anchor-top-bar">
            <p class="font-bold">热门主播</p>
        </div>
        <div v-for="(item, index) in popList" :key="index">
            <popular-anchor-item :id="item.id" :nick-name="item.nickName" :avatar-url="item.avatarUrl"></popular-anchor-item>
        </div>
    </div>
</template>

<script>
import PopularAnchorItem from "@/views/home/popular-anchor/PopularAnchorItem";
import {onMounted, ref} from "vue";
import {getPopularList} from "@/network/dj/toplist";
export default {
    name: "PopularAnchor",
    components: {
        PopularAnchorItem
    },
    setup() {
        const popList = ref([]);
        onMounted(() => {
            getPopularList(5).then(res => {
                popList.value = res.data.data.list;
            })
        })
        return {
            popList
        }
    }
}
</script>

<style scoped lang="scss">
.popular-anchor {
    @apply m-4 p-2;
    .popular-anchor-top-bar {
        @apply border-b border-gray-400;
    }
}
</style>